<template>
  <div class="space-y-4">
    <!-- 指数说明 -->
    <div class="bg-blue-50 rounded-xl p-4 border border-blue-200">
      <p class="text-sm text-blue-800 leading-relaxed">
        {{ currentIndexDescription }}
      </p>
    </div>

    <!-- 指数列表 -->
    <div class="space-y-4">
      <div
        v-for="(value, index) in props.msgdatalist"
        :key="index"
        class="flex gap-4 p-4 bg-gradient-to-r from-white to-gray-50 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100"
      >
        <!-- 日期 -->
        <div class="flex flex-col items-center justify-center w-20 flex-shrink-0">
          <div class="text-2xl font-bold text-blue-600">
            {{ value?.date?.slice(-2) }}
          </div>
          <div class="text-xs text-gray-500 mt-1">
            {{ value?.date?.slice(-5, -3) }}月
          </div>
          <div class="text-xs text-gray-400 mt-1">
            {{ getDayOfWeek(value?.date) }}
          </div>
        </div>

        <!-- 内容 -->
        <div class="flex-1 min-w-0">
          <!-- 等级标签 -->
          <div class="flex items-center gap-2 mb-3">
            <span
              class="px-3 py-1 rounded-full text-white text-sm font-medium shadow-sm"
              :class="getCategoryClass(value.category)"
            >
              {{ value.category }}
            </span>
            <div class="w-1 h-4 bg-gray-200"></div>
            <span class="text-xs text-gray-500">
              {{ getIndexLevel(value.category) }}
            </span>
          </div>

          <!-- 描述 -->
          <p class="text-gray-700 leading-relaxed text-sm line-clamp-3">
            {{ value.text }}
          </p>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div
      v-if="props.msgdatalist.length === 0"
      class="text-center py-12 text-gray-500"
    >
      <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
        <span class="text-2xl">📊</span>
      </div>
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";

const props = defineProps({
  msgdatalist: Array,
  moduleValue: Number,
});

const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

const getDayOfWeek = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString.replace(/-/g, '/'));
  return days[date.getDay()];
};

const currentIndexDescription = computed(() => {
  const indexMap = {
    8: "舒适度指数是描述天气对人体的综合影响指标之一，它表征人体在多种天气条件下感觉舒适的程度，人们可根据当天的指数预报适当地安排室外的生产或活动以及如何防范冷热突变，加强自我保健。",
    2: "洗车指数是根据过去12小时和未来48小时有无雨雪天气，路面是否有积雪和泥水，是否容易使汽车溅上泥水，是否有沙尘等天气条件，给驾驶员朋友提供是否适宜洗车的气象指数。洗车指数共分为4级，级数越高，就越不适宜洗车。",
    3: "穿衣指数是根据自然环境对人体感觉温度影响最主要的天空状况、气温、湿度及风等气象条件，对人们适宜穿着的服装进行分级，以提醒人们根据天气变化适当着装。一般来说，温度较低、风速较大，则穿衣指数级别较高。穿衣气象指数共分8级，指数越小，穿衣的厚度越薄。",
    9: "感冒指数是根据天气变化确定感冒发生的几率，根据温度、湿度、风速、天气现象、温度日较差等气象因素计算而来。",
    1: "运动指数是考虑气象因素和环境对人体的影响，包括紫外线、风力、气压、温度、光照以及雨雪沙尘等，为广大老百姓提供的是否适宜运动的建议。运动指数分为3级，级数越高，就越不适宜运动。",
    6: "旅游指数是从天气的角度出发给市民提供的出游建议。一般天气晴好，温度适宜的情况下最适宜出游；而酷热或严寒的天气条件下，则不适宜外出旅游。",
    5: "紫外线指数是指那一天中当太阳处于天空中最高点时实际紫外线辐射的强度，通常这发生在太阳正午的前后四个小时中，可以帮助人们评估紫外线对人体可能造成的伤害。",
    10: "空气污染扩散条件指数是不考虑污染源的情况下，从气象角度出发，对未来大气污染物的稀释、扩散、聚积和清除能力进行评价。"
  };
  return indexMap[props.moduleValue] || "该指数为您提供相关的生活气象指导。";
});

const getCategoryClass = (category) => {
  const classMap = {
    '适宜': 'bg-green-500',
    '较适宜': 'bg-blue-500',
    '不太适宜': 'bg-yellow-500',
    '不适宜': 'bg-red-500',
    '一般': 'bg-gray-500',
    '很好': 'bg-green-600',
    '好': 'bg-blue-400',
    '差': 'bg-red-400'
  };
  return classMap[category] || 'bg-blue-500';
};

const getIndexLevel = (category) => {
  const levelMap = {
    '适宜': '推荐',
    '较适宜': '尚可', 
    '不太适宜': '注意',
    '不适宜': '避免',
    '一般': '普通',
    '很好': '优秀',
    '好': '良好',
    '差': '不佳'
  };
  return levelMap[category] || '普通';
};
</script>

<style scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>